/*
 * @Author: Await
 * @Date: 2025-04-18 09:40:15
 * @LastEditors: Await
 * @LastEditTime: 2025-05-06 15:10:20
 * @Description: 图表类型选择器
 */

import React from 'react';
import { Card, Typography, Row, Col } from 'antd';
import { ChartType, ChartTypeValue } from '../../../types/chartTypes';
import { BarChartOutlined, LineChartOutlined } from "@ant-design/icons";

// 图表类型选项
const chartTypeOptions = [
    // 2D基础图表
    {
        type: ChartType.BAR,
        name: '柱状图',
        icon: '📊'
    },
    {
        type: ChartType.LINE,
        name: '折线图',
        icon: '📈'
    },
    {
        type: ChartType.PIE,
        name: '饼图',
        icon: '🥧'
    },
    {
        type: ChartType.SCATTER,
        name: '散点图',
        icon: '🔵'
    },
    {
        type: ChartType.RADAR,
        name: '雷达图',
        icon: '📡'
    },
    {
        type: ChartType.HEATMAP,
        name: '热力图',
        icon: '🔥'
    },
    // 2D高级图表
    {
        type: ChartType.GRAPH,
        name: '关系图',
        icon: '🕸️'
    },
    {
        type: ChartType.TREE,
        name: '树图',
        icon: '🌳'
    },
    {
        type: ChartType.GAUGE,
        name: '仪表盘',
        icon: '⏱️'
    },
    // 3D图表
    {
        type: ChartType.BAR_3D,
        name: '3D柱状图',
        icon: <BarChartOutlined style={{ fontSize: 24 }} />
    },
    {
        type: ChartType.SCATTER_3D,
        name: '3D散点图',
        icon: <LineChartOutlined style={{ fontSize: 24 }} />
    },
    {
        type: ChartType.PATH_3D,
        name: '3D路径图',
        icon: '🛣️'
    },
    {
        type: ChartType.LINE_3D,
        name: '3D折线图',
        icon: '📉'
    }
];

interface ChartTypeSelectorProps {
    currentType: ChartType;
    onSelect: (type: ChartType) => void;
}

/**
 * 图表类型选择器组件
 */
const ChartTypeSelector: React.FC<ChartTypeSelectorProps> = ({
    currentType,
    onSelect
}) => {
    return (
        <div>
            <Typography.Text type="secondary" style={{ marginBottom: 8, display: 'block' }}>
                选择图表类型
            </Typography.Text>
            <Row gutter={[8, 8]}>
                {chartTypeOptions.map(option => (
                    <Col span={6} key={option.type}>
                        <Card
                            hoverable
                            size="small"
                            style={{
                                borderColor: currentType === option.type ? '#1890ff' : '#f0f0f0',
                                backgroundColor: currentType === option.type ? '#e6f7ff' : 'transparent',
                                transition: 'all 0.2s',
                                padding: 8, textAlign: 'center',
                                height: 80 // 固定高度，保持一致性
                            }}
                            onClick={() => onSelect(option.type as ChartType)}
                        >
                            {typeof option.icon === 'string' ? (
                                <Typography.Text style={{ fontSize: 24, marginBottom: 4, display: 'block' }}>
                                    {option.icon}
                                </Typography.Text>
                            ) : (
                                <div style={{ marginBottom: 4, display: 'flex', justifyContent: 'center' }}>
                                    {option.icon}
                                </div>
                            )}
                            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
                                {option.name}
                            </Typography.Text>
                        </Card>
                    </Col>
                ))}
            </Row>
        </div>
    );
};

export default ChartTypeSelector; 